<template>
    <div class="">
        <div class="approvalContent whiteBg">
            <div class="center">
                <!-- <img @click.stop="goShowImg" :src="detailInfo.url" style="width:3rem;display:inline-block" /> -->
                 <van-image  width='120' height="140"  @click.stop="goShowImg(detailInfo.url)" lazy-load fit='cover' :src="detailInfo.url"></van-image>
            </div>
            <div>
                <ul class="color999 flex">
                    <li>主题 <span class="color333">{{detailInfo.subject_name}}</span></li>
                    <li>设计师 <span class="color333">{{detailInfo.sj_name}}</span></li>
                    <li>波段 <span class="color333">{{detailInfo.date_name}}</span></li>
                    <li>款号 <span class="color333">{{detailInfo.fas_code}}</span></li>
                    <li>采购类型 <span class="color333">{{detailInfo.fob_type}}</span></li>
                    <li>审批类型 <span class="color333">{{detailInfo.chk_typename}}</span></li>
                    <li>创建人 <span class="color333">{{detailInfo.crname}}</span></li>
                    <li>创建时间 <span class="color333">{{detailInfo.crdate}}</span></li>
                    <li class="wd100">供应商 <span class="color333">{{detailInfo.fob_type_supp_name}}</span></li>
                    <li class="wd100">颜色 <span class="color333">{{detailInfo.bak1}}</span></li>
                </ul>
            </div>
            
        </div>
        <div class="flex flexCenter btnSty">
            <div class="sameBtn center mr10 ml10 color999 cancelBtn" @click="goOperateApproval(30)">撤回</div>
            <div class="sameBtn center mr10 ml10 adoptBtn colorfff" @click="goOperateApproval(20)">通过</div>
        </div>
        <van-popup v-model="showMask">
            <div>
                <div @click="goClose"><img src="../../assets/image/close.png" class="closeIcon mb10 disInline" /></div>
                <textarea cols="32" rows="6" placeholder="请填写撤回原因" v-model="remarkVal" maxlength="100"></textarea>
                <div class="flex flexAround addRemark fontSize13">
                    <div class="sameBtn center mr10 ml10 color999 cancelBtn" @click="cancelMask">不 填</div>
                    <div class="sameBtn center mr10 ml10 colorGreen"  @click="goAddRemark(30)">确 定</div>
                    <!-- <van-button type="primary" size="normal" color="#aaa" round @click="cancelMask">不 填</van-button>
                    <van-button type="info" size="normal" round @click="goAddRemark(30)">确 定</van-button> -->
                </div>
            </div>
            
        </van-popup>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog } from 'vant';
import {GetQueryStr} from '@/common/common'

export default{
    name:'approvalDetail',
    data(){
        return{
            detailInfo:{},
            imgUrl:'https://erp.ellassay.com/uploads/m_image/brandClassify/leaf.jpg',
            // imgUrl:require('../../assets/image/testImg.jpg')
            showMask:false,
            remarkVal:'',
            id:''
        }
    },
    created(){
        this.id=this.$route.query.id
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.goApprovalDetail()
    },
    methods:{
        goApprovalDetail(){
            this.$apiRequest.goApprovalDetail({id:this.id}).then(res=>{
                console.log('详情',res)
                if(res.code==1){
                    this.detailInfo=res.data
                }
            })
        },
        goShowImg(){
            ImagePreview([this.detailInfo.url])
        },
        goOperateApproval(num){
            let that=this
            if(num==30){
                this.showMask=true
                return
            }
            Dialog.confirm({
                title: '提示',
                message: '确认通过吗?',
            })
            .then(() => {
                that.approvalStatus(20)
            })
            .catch(() => {
                    // on cancel
            });
        },
        approvalStatus(num){
            let that=this
            let obj={
                id:this.id,
                status:num,
                opinion:this.remarkVal
            }
            console.log('提交的参数',obj)
            this.$apiRequest.goOperateApproval(obj).then(res=>{
                console.log('通过了嘛',res)
                if(res.code==1){
                    Toast.success('提交成功')
                    setTimeout(() => {
                        that.$router.push('approvalList')
                    }, 2000);
                }else{
                    Toast(res.msg)
                }
            })
        },
        goAddRemark(){
            let that=this
            if(this.remarkVal==''){
                Toast('备注不能为空')
                return
            }
            Dialog.confirm({
                title: '提示',
                message: '确认撤回吗?',
            })
            .then(() => {
                    // on confirm
                that.approvalStatus(30)
                that.showMask=false
            })
            .catch(() => {
                    // on cancel
            });
        },
        cancelMask(){
            let that=this
            this.remarkVal=''
            Dialog.confirm({
                title: '提示',
                message: '确认撤回吗?',
            })
            .then(() => {
                    // on confirm
                that.approvalStatus(30)
                that.showMask=false
            })
            .catch(() => {
                    // on cancel
            });
        },
        goClose(){
            this.showMask=false
            this.remarkVal=''
        }
    }
}
</script>
<style  lang='less'>
.approvalContent{
    .van-popup{
        border-radius: 0.1rem;
    }
}
</style>
<style lang='less' scoped>
.wrapper{background-color: #eee;padding: 0.4rem 0 2.2rem 0;}
.approvalContent{
    width: 92%;
    margin: 0 auto;
    border-radius: 0.1rem;
    padding: 0.4rem;
    ul{
        flex-wrap:wrap;
        margin-top: 0.4rem;
        li{
            width: 50%;
            margin-bottom: 0.1rem;
        }
        .wd100{
            width: 100% !important;
        }
    }
}
.btnSty{
    position: fixed;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    .sameBtn{
        width: 2rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border:1px #ddd solid;
        border-radius: 0.1rem;
    }
    .cancelBtn{
        background-color: #eee;
    }
    .adoptBtn{
        background-color: green;
    }
}
.van-popup--center{
    padding: 0.6rem 0.4rem 0.4rem 0.4rem;
}
.addRemark{
    margin-top: 0.5rem;
    .sameBtn{
        width: 1.6rem;
        height: 0.7rem;
        line-height: 0.7rem;
        border:1px #ddd solid;
        border-radius: 0.1rem;
    }
}
textarea{border:none;border: 1px #ccc solid;}
.closeIcon{
    width: 0.3rem;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem
}
</style>
